<template>
    <div class="card-page">
        <div class="card-detail">
            <div class="back_btn" @click="back">&lt;&nbsp;&nbsp;返回</div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="企业详情" name="1">
                    <div class="card-box">
                        <CardDetail :orderInfo="orderInfo" :type="'orderDetail'"></CardDetail>
                    </div>
                </el-tab-pane>

            </el-tabs>
        </div>


    </div>
</template>
<script>
import CardDetail from "@/components/card-detail.vue"
import { queryActivityOrderById } from '@/api/api.js';
import { str2date } from '@/utils/util.js';
export default {
    components: { CardDetail },
    data () {
        return {
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                }
            },
            activeName:'1',
            orderInfo: {
            },
        }
    },
    async created() {
        const order = JSON.parse(sessionStorage.getItem("orderDetail"));
        const result = await queryActivityOrderById({orderId:order.orderId});
        if(result.code == 200){
            //activityTypeText 活动类型 :1 名片时长/2 名片使用人数/3 短视频数量
            //setMeal
            //payType
            this.orderInfo = result.data;
            this.orderInfo.activityTypeText = this.orderInfo.activityType == 1 ? "名片时长" : this.orderInfo.activityType == 2 ? "名片使用人数" : this.orderInfo.activityType == 3 ? "短视频数量" : "";
            const unit =  this.orderInfo.activityType == 1 ? "年" : this.orderInfo.activityType == 2 ? "位" : this.orderInfo.activityType ==  3 ? "次" : "";
            this.orderInfo.setMeal = this.orderInfo.name + "/" + this.orderInfo.duration + unit + "/" +  this.orderInfo.orderMoney +" 元";
            console.log(this.orderInfo)
        }


    },
    mounted() {

    },
    watch:{
        '$route':'fetchData'
    },
    methods: {
        handleClick(){

        },
        fetchData(){
            this.getCardDetail();
        },
        getCardDetail () {
            let params = {
                companyId: this.$route.query.id
            }
            getAdminCompanyInfoApi(params).then(res => {
                let orderInfo = res.data
                if (orderInfo.photo) {
                    orderInfo.photo = orderInfo.photo.split(',');
                }
                if (!orderInfo.agentMoney) {
                    orderInfo.agentMoney = 0;
                }
                this.orderInfo = orderInfo;
                this.codeImg = res.data.wxTwoCode
            })
        },
        back(){
            window.history.back();
        }
    },
}
</script>
<style lang="scss">
.card-page{
    display: flex;
    .card-detail{
        position: relative;
    }
    .card-box{
        flex: 1;
        min-width: 900px;
        position: relative;
        .deleta-btn{
            padding: 20px 0;
            div{
                height: 40px;
                line-height: 40px;
                text-align: center;
                background:rgba(255,92,108,1);
                border-radius:4px;
                color:#fff;
                cursor: pointer;
                width: 85px;
            }
        }
        .setAgent{
            position: absolute;
            right: 70px;
            top: 120px;
            z-index: 999;
            .isAgent{
                width: 120px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                border-radius: 5px;
                background: #fcb46c;
                border-radius: 5px;
                border: solid #fcb46c 1px;
                color: #fff;
                font-weight: bold;
                margin-bottom: 30px;
            }
            .btn{
                width: 120px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                border-radius: 5px;
                border: solid #51CDCB 1px;
                background: #51CDCB;
                color: #fff;
            }
            .price{
                font-weight: bold;
            }
        }
        .page{
            padding: 10px 0;
            text-align: center;
        }
    }
    .img-box{
        margin-left: 128px;
        min-width: 466px;
        width: 466px;
        height: 950px;
        background: url(../../assets/images/iphone.png) no-repeat 0 0;
        background-size: 100% 100%;
        padding: 198px 40px 118px 40px;
        box-sizing: border-box;
        div{
            width: 100%;
            height: 100%;
            position: relative;
            background: #fff;
            padding-top: 2px;
            img{
                width: 300px;
                height: 300px;
                margin-left: 43px;
                margin-bottom: 40px;
            }
            p{
                height:41px;
                font-size:16px;
                color:rgba(38,50,56,1);
                line-height:24px;
                text-align: center;
                margin: 0;
            }
        }
    }
    .back_btn{
        position: absolute;
        border-radius: 4px;
        // background: #B9EBEA;
        background: #51CDCB;
        font-size: 14px;
        line-height: 30px;
        height: 30px;
        color: #fff;
        padding: 0 20px;
        cursor: pointer;
        top: 5px;
        right: 30px;
        z-index: 999;
    }
}
</style>
